<template>
	<div>
		<!-- <div v-for="item in items" :key="item.id">
			{{ item }}
		</div> -->
		<div :class="arr" v-on:click="chg">按钮</div>
		<div :class="{ red: istrue }" v-on:click="chg">按钮</div>
		<!-- @ 不能省略,代表的是v-on  keydown keyup blur失去焦点 
			focus获取焦点 mouseover 鼠标悬停 input 输入的时候,change 数据改变的时候
		 -->
		<div :class="{ red: istrue }" @:click="chg">按钮</div>

		<div :class="{ red: istrue }" @:click="arr.push('red')" @:mouseover="istrue = !istrue">也可以是函数体</div>

		<!-- <input type="text" v-on:blur="" @:focus="" /> -->
	</div>
</template>

<script setup>
	// vue里边没有dom的操作,通过改变数据,来改变页面样式
	import { ref, reactive } from 'vue'
	let arr = ref([])
	let istrue = ref(false)
	let chg = function () {
		arr.value.push("red")
		arr.value.push("bg")
		// istrue.value =true
		// istrue.value = !istrue.value

	}

</script>

<style scoped>
	.red {
		color: red;
	}
	.bg{
		background: #000;
	}
</style>
